<template>
  <view class="farm-game">
    <!-- 游戏地图 -->
    <view class="game-map">
      <!-- 绘制地图格子 -->
      <view v-for="(row, rowIndex) in map" :key="rowIndex" class="map-row">
        <view 
          v-for="(cell, colIndex) in row" 
          :key="colIndex" 
          class="map-cell"
          :class="{
            'soil': cell.type === 'soil',
            'planted': cell.planted,
            'watered': cell.watered,
            'player': player.x === colIndex && player.y === rowIndex
          }"
          @click="handleCellClick(rowIndex, colIndex)"
        >
          <view v-if="cell.planted" class="plant" :style="{ backgroundColor: plantColors[cell.plantType] }"></view>
          <view v-if="player.x === colIndex && player.y === rowIndex" class="player-icon">👨‍🌾</view>
        </view>
      </view>
    </view>

    <!-- 操作面板 -->
    <view class="control-panel">
      <button @click="currentAction = 'move'">移动</button>
      <button @click="currentAction = 'plant'">种植</button>
      <button @click="currentAction = 'water'">浇水</button>
      <button @click="harvest()">收获</button>
    </view>

    <!-- 状态显示 -->
    <view class="status-panel">
      <text>当前操作: {{ actionNames[currentAction] }}</text>
      <text>种子: {{ seeds }} 个</text>
      <text>收获: {{ harvestCount }} 个</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 游戏地图 (10x10)
      map: Array(10).fill().map(() => 
        Array(10).fill().map(() => ({
          type: 'grass',  // grass/soil
          planted: false,
          watered: false,
          plantType: 0,
          growth: 0
        }))
      ),
      // 玩家位置
      player: {
        x: 5,
        y: 5
      },
      // 当前操作模式
      currentAction: 'move', // move/plant/water
      // 植物颜色
      plantColors: ['#4CAF50', '#8BC34A', '#CDDC39'],
      // 游戏资源
      seeds: 10,
      harvestCount: 0,
      // 操作名称
      actionNames: {
        move: '移动',
        plant: '种植',
        water: '浇水'
      }
    }
  },
  mounted() {
    // 初始化一些土地
    this.initFarmland();
  },
  methods: {
    // 初始化一些可耕种的土地
    initFarmland() {
      for (let i = 3; i < 7; i++) {
        for (let j = 3; j < 7; j++) {
          this.map[i][j].type = 'soil';
        }
      }
    },
    
    // 处理格子点击
    handleCellClick(row, col) {
      const distance = Math.abs(this.player.x - col) + Math.abs(this.player.y - row);
      
      if (this.currentAction === 'move') {
        // 移动角色
        if (distance <= 2) {
          this.player.x = col;
          this.player.y = row;
        } else {
          uni.showToast({
            title: '太远了，走不过去',
            icon: 'none'
          });
        }
      } else if (this.currentAction === 'plant' && distance <= 1) {
        // 种植
        this.plant(row, col);
      } else if (this.currentAction === 'water' && distance <= 1) {
        // 浇水
        this.water(row, col);
      }
    },
    
    // 种植
    plant(row, col) {
      const cell = this.map[row][col];
      if (cell.type !== 'soil') {
        uni.showToast({
          title: '这里不能种植',
          icon: 'none'
        });
        return;
      }
      
      if (cell.planted) {
        uni.showToast({
          title: '这里已经种了植物',
          icon: 'none'
        });
        return;
      }
      
      if (this.seeds <= 0) {
        uni.showToast({
          title: '没有种子了',
          icon: 'none'
        });
        return;
      }
      
      cell.planted = true;
      cell.plantType = Math.floor(Math.random() * this.plantColors.length);
      cell.growth = 0;
      this.seeds--;
      
      uni.showToast({
        title: '种植成功',
        icon: 'success'
      });
    },
    
    // 浇水
    water(row, col) {
      const cell = this.map[row][col];
      if (!cell.planted) {
        uni.showToast({
          title: '这里没有植物',
          icon: 'none'
        });
        return;
      }
      
      if (cell.watered) {
        uni.showToast({
          title: '已经浇过水了',
          icon: 'none'
        });
        return;
      }
      
      cell.watered = true;
      cell.growth += 0.5;
      
      uni.showToast({
        title: '浇水成功',
        icon: 'success'
      });
      
      // 检查植物是否成熟
      if (cell.growth >= 1) {
        setTimeout(() => {
          uni.showToast({
            title: '植物成熟了!',
            icon: 'success'
          });
        }, 500);
      }
    },
    
    // 收获
    harvest() {
      const cell = this.map[this.player.y][this.player.x];
      if (!cell.planted) {
        uni.showToast({
          title: '这里没有植物',
          icon: 'none'
        });
        return;
      }
      
      if (cell.growth < 1) {
        uni.showToast({
          title: '植物还没成熟',
          icon: 'none'
        });
        return;
      }
      
      cell.planted = false;
      cell.watered = false;
      cell.growth = 0;
      this.harvestCount++;
      this.seeds += 2; // 收获后获得种子
      
      uni.showToast({
        title: '收获成功! +2种子',
        icon: 'success'
      });
    },
    
    // 每天更新植物生长
    dayUpdate() {
      this.map.forEach(row => {
        row.forEach(cell => {
          if (cell.planted && cell.watered) {
            cell.growth += 0.1;
            cell.watered = false; // 重置浇水状态
          }
        });
      });
    }
  }
}
</script>

<style>
.farm-game {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.game-map {
  border: 2px solid #8D6E63;
  background-color: #A5D6A7;
  margin-bottom: 20px;
}

.map-row {
  display: flex;
}

.map-cell {
  width: 50px;
  height: 50px;
  border: 1px solid #78909C;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.soil {
  background-color: #8D6E63;
}

.planted {
  background-color: #5D4037;
}

.watered::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(66, 165, 245, 0.3);
}

.plant {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.player-icon {
  font-size: 24px;
  position: absolute;
  z-index: 10;
}

.control-panel {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.control-panel button {
  padding: 5px 10px;
  font-size: 14px;
}

.status-panel {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
</style>